<template>
  <div class="assessment-indicators">
    <div
      class="item"
      v-for="(l, i) in data"
      :key="`assessment-indicators-item${i}`"
    >
      <img
        src="~@/assets/concreteScreen/icon_speed.png"
        class="img"
        alt=""
      />
      <div class="data">
        <p class="key">{{ l.key }}</p>
        <p class="val-wrap">
          <span class="val">{{ l.val }}</span>
          <span class="unit">{{ l.unit }}</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        { key: "理论密实波速值", val: 4983, unit: "m/s" },
        { key: "临界波速值", val: 4456, unit: "m/s" },
      ],
    };
  },
};
</script>
<style scoped lang='scss'>
.assessment-indicators {
  padding-top: vh(20px);
  padding-bottom: vh(20px);
  .item {
    width: vw(239px);
    height: vh(80px);
    background: url("~@/assets/concreteScreen/bg_speed.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    &:first-of-type{
      margin-bottom: vh(4px);
    }
    .img {
      height: vh(48px);
      margin: 0 vw(18px);
    }
    .data {
      .key {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: vh(16px);
        color: #b3b3b3;
        margin-bottom: vh(6px);
      }
      .val-wrap {
        font-family: D-DIN-PRO;
        font-weight: bold;
        font-size: vh(24px);
        color: #dafdff;
        .unit {
          margin-left: 4px;
        }
      }
    }
    p {
      margin: 0;
    }
  }
}
</style>
